<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>回传记录添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/font-awesome/css/font-awesome.min.css" media="all">
    <style>
        .layui-form-label{ width: 105px; }
        .layui-input-block{ margin-left: 135px;}
        .link{
            cursor: pointer;
            color: #009688 !important;
        }
    </style>
</head>
<body>

<div class="layui-form" style="padding: 20px 10px 0 20px;">


    {if $info.media_id == 4 || $info.media_id == 6}
    {if $info.mediaAccounts}
    <label class="layui-form-label" style="text-align: left;width: 70px !important;padding: 5px 0px !important;">选择账户：</label>
    <div class="layui-btn-container">
        {foreach $info.mediaAccounts as $v}
        <button type="button" id="a-b-{$v.mysign}" class="b-account layui-btn layui-btn-sm {if !$v.selected}layui-btn-primary{/if}" onclick="changeAccount('{$info.id}','{$info.monitor}','{$info.hap}','{$v.mysign}','{$info.media_id}');">
            {$v.accountname}<span style="color: #FF5722;">{$v.akey_text}</span>
        </button>
        {/foreach}
    </div>
    {else /}
        {if $info.media_id == 4}
        <span style="color: #FF5722">请先添加百度广告账户，再获取投放链接和监测链接！<a class="link" lay-href="/baidu/index.html" lay-text="百度账号">+ 添加账户</a></span>
        {elseif $info.media_id == 6 /}
        <span style="color: #FF5722">请先添加vivo广告账户，再获取投放链接和监测链接！<a class="link" lay-href="/vivo/index.html" lay-text="vivo账号">+ 添加账户</a></span>
        {/if}
        <div style="height: 20px;"></div>
    {/if}
    {/if}

    {notempty name="info.hap"}
    <p style="color: #777 !important;margin-bottom: 20px;word-wrap: break-word;line-height: 20px;">
        <span id="pt{$info.id}">{$info.hap}</span>
        <br>
        <i class="fa fa-files-o copySpan link" aria-hidden="true" data-clipboard-target="#pt{$info.id}" data-toggle="tooltip" data-placement="top" title="" data-original-title="点击复制"> 复制hap投放链接{notempty name="info.hap2"}
            （1.0）{/notempty} </i>
    </p>
    {/notempty}


    {notempty name="info.hap2"}
    <p style="color: #777 !important;margin-bottom: 20px;word-wrap: break-word;line-height: 20px;">
        <span id="pt2{$info.id}">{$info.hap2}</span>
        <br>
        <i class="fa fa-files-o copySpan link" aria-hidden="true" data-clipboard-target="#pt2{$info.id}" data-toggle="tooltip" data-placement="top" title="" data-original-title="点击复制"> 复制hap投放链接（2.0） </i>
    </p>
    {/notempty}


    {notempty name="info.h5Jump"}
    <p style="color: #777 !important;margin-bottom: 20px;word-wrap: break-word;line-height: 20px;">
        <span id="pt3{$info.id}">{$info.h5Jump}</span>
        <br>
        <i class="fa fa-files-o copySpan link" aria-hidden="true" data-clipboard-target="#pt3{$info.id}" data-toggle="tooltip" data-placement="top" title="" data-original-title="点击复制">方式一：复制h5投放链接</i>
    </p>
    {/notempty}


    {notempty name="info.h5Jump2"}
    <p style="color: #777 !important;margin-bottom: 20px;word-wrap: break-word;line-height: 20px;">
        <span id="pt4{$info.id}">{$info.h5Jump2}</span>
        <br>
        <i class="fa fa-files-o copySpan link" aria-hidden="true" data-clipboard-target="#pt4{$info.id}" data-toggle="tooltip" data-placement="top" title="" data-original-title="点击复制">方式二：复制h5投放链接</i>
    </p>
    {/notempty}

    {notempty name="info.monitor"}
    <p style="color: #777 !important;word-wrap: break-word;line-height: 20px;margin-top: 20px;">
        <span id="ptm{$info.id}">{$info.monitor}</span>
         <br>
        <i class="fa fa-files-o copySpan link" aria-hidden="true" data-clipboard-target="#ptm{$info.id}" data-toggle="tooltip" data-placement="top" title="" data-original-title="点击复制"> 复制触点监测链接（按需使用，曝光/展示无需填写） </i>
    </p>
    {/notempty}

</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script src="/static/js/clipboard.min.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function(){
        var $ = layui.$
            ,form = layui.form;
    })

    var clipboard = new Clipboard('.copySpan');
    clipboard.on('success', function(e) {
        // console.log(e);
        layer.msg("复制成功！",{icon:6})
    });

    function changeAccount(id, monitor, hap1, mysign, mediaId) {
        layui.$("#ptm"+id).html('');
        if (mediaId == 6) {
            layui.$("#pt" + id).html('');
        }

        // 获取所有具有类名为 "b-account" 的元素
        //layui-btn-primary layui-border-green
        var elements = document.querySelectorAll('.b-account');
        // 遍历每个元素并移除类名 "layui-border-green"
        elements.forEach(function(element) {
            element.classList.remove('layui-border-green');
            element.classList.add('layui-btn-primary');
        });
         layui.$("#a-b-" + mysign).removeClass('layui-btn-primary');

        var tipIndex = layer.load(1, {
            shade: [0.1, '#fff', false] //0.1透明度的白色背景
        });
        setTimeout(function() {

            var urlObj = new URL(monitor);
            var searchParams = urlObj.searchParams;
            searchParams.set('mysign', mysign);
            var newUrl = urlObj.toString();
            layui.$("#ptm"+id).html(newUrl);

            if (mediaId == 6) {
                //var urlObj = new URL(hap1);
                var searchParams = urlObj.searchParams;
                searchParams.set('mysign', mysign);
                //var newUrl = urlObj.toString();
                //layui.$("#pt" + id).html(newUrl);
            }
            layer.close(tipIndex);
        }, 800); // 2000 毫秒等于 2 秒
    }
</script>
</body>
</html>